<template>
  <van-nav-bar title="参与质押" left-text="" left-arrow @click-left="onClickLeft" fixed placeholder />
  <div class="page">
    <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">

      <div class="item" v-for="item in list" :key="item">
        <div class="left">
          <div class="name">质押2NFT</div>
          <div class="time">2023-04-14 17:04</div>
        </div>
        <div class="rig">+2算力</div>
      </div>
    </van-list>
  </div>
</template>
<script name="pledge" lang="ts" setup>
import { ref } from 'vue'

const list = ref([]);
const loading = ref(false);
const finished = ref(false);

const onLoad = () => {
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1);
    }

    // 加载状态结束
    loading.value = false;

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true;
    }
  }, 200);
}
const onClickLeft = () => history.back();
</script>
<style lang="less" scoped>
.page {
  background: #E9E9E9;
  min-height: calc(100vh - 50px);
  padding: 13px;
  padding-bottom: 50px;

  .item {
    height: 66px;
    background: #FFFFFF;
    border-radius: 15px;
    margin-bottom: 11px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 18px;

    .left {
      display: flex;
      flex-direction: column;

      .name {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #000000;
        line-height: 1;
      }

      .time {
        margin-top: 10px;
        font-size: 13px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #767676;
        line-height: 1;
      }
    }

    .rig {
      font-size: 18px;
      font-family: PingFang SC;
      font-weight: 800;
      color: #63A0FE;
    }
  }
}
</style>